import React from 'react';
import { Button, Input, Space, Drawer, Select, Option, ConfigProvider, Form, Col, Row, DatePicker } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN';
import "./flHeader.css"


const { RangePicker } = DatePicker;

const onFinish = (values) => {
    console.log(values);

};

class FlHeader extends React.Component {

    formRef = React.createRef();

    constructor(props) {
        super(props)
        this.state = {
            show: false,
            currentDisplay: false,
            files: [
                {
                    value: '1',
                    name: '我的文档'
                },
                {
                    value: '2',
                    name: '共享文档'
                },
                {
                    value: '3',
                    name: '导出文档'
                },
                {
                    value: '4',
                    name: '其他'
                },
            ],
            publisher: [
                {
                    value: '1',
                    name: '超级管理员'
                },
                {
                    value: '2',
                    name: '管理员'
                },
            ]
        }
        this.click = () => {
            this.setState({
                show: !this.state.show,

            })
        }
        this.onClose = () => {
            this.setState({
                show: !this.state.show,

            });
        };
    }

    upload = () => {

        // console.log(this.props);
        this.props.setdisplay()
    };

    getContainer = () => {
        return this.container;
    };
    saveContainer = container => {
        this.container = container;
    };
    onReset = () => {
        this.formRef.current.resetFields();
    }

    render() {
        return (
            <div className='headrbox'>
                <ConfigProvider locale={zhCN}>
                    <div ref={this.saveContainer} className="heads" style={{ height: this.state.show ? '280px' : '' }}>
                        <Space  >
                            <Button className='upfile' onClick={this.upload}>上传文件</Button>
                            <Form  onFinish={onFinish} ref={this.formRef}>
                                <Form.Item style={{ display: 'inline-block', width: 140, marginBottom: 0,marginRight:0 }} name="phone">
                                    <Input className='inputsize' placeholder="联系人、手机号码" ></Input>
                                </Form.Item>
                                <Form.Item  style={{ display: 'inline-block', width: 70, marginBottom: 0,marginLeft:0}}>
                                    <Button type='primary'  htmlType="submit" >搜索</Button>
                                </Form.Item>
                            </Form>

                            <Button type='primary' onClick={this.click}>
                                高级搜索
                            </Button>

                        </Space>

                    </div>
                    <Drawer
                        title="高级搜索"
                        placement="top"
                        closable={true}
                        size='default'
                        height={'320px'}
                        onClose={this.onClose}
                        visible={this.state.show}
                        getContainer={this.getContainer}
                        style={{ position: 'absolute' }}
                    >

                        <Form onFinish={onFinish} ref={this.formRef}>
                            <Row>
                                <Col offset={2} >
                                    <Form.Item label="文件名" name="filename"
                                    >
                                        <Input></Input>
                                    </Form.Item>
                                </Col>

                                <Col offset={3} >
                                    <Form.Item label="文件分类" name="files">
                                        <Select placeholder="请选择" style={{ width: '140px' }}>
                                            {
                                                this.state.files.map((item, index) =>
                                                    <Select.Option key={index} value={item.value} >{item.name}</Select.Option>
                                                )
                                            }

                                        </Select>
                                    </Form.Item>
                                </Col>
                                <Col offset={3}>
                                    <Form.Item name="share" label="是否共享">
                                        <Select placeholder="请选择" style={{ width: '140px' }}>
                                            <Select.Option value="1">是</Select.Option>
                                            <Select.Option value="0">否</Select.Option>
                                        </Select>

                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col offset={2} >
                                    <Form.Item label="创建日期" name="createDate">
                                        <RangePicker style={{ width: '293px' }} />
                                    </Form.Item>
                                </Col>

                                <Col offset={1}>
                                    <Form.Item label="业务员" name="publisher" >
                                        <Select placeholder="请选择" style={{ width: '140px' }}>
                                            {
                                                this.state.publisher.map((item, index) =>
                                                    <Select.Option key={index} value={item.value} >{item.name}</Select.Option>
                                                )
                                            }
                                        </Select>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={3} offset={9}>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit">
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Col>
                                <Col span={3}>
                                    <Form.Item>
                                        <Button type="primary" onClick={this.onReset}  >
                                            清空条件
                                        </Button>
                                    </Form.Item>
                                </Col>
                            </Row>


                        </Form>
                    </Drawer>
                </ConfigProvider>
            </div>


        )
    }
}


export default FlHeader